<template>
	<view class="set-sign">
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<view class="sign-info">
			<view class="head">
				<!-- <u-icon name="volume" color="#000000" size="28"></u-icon> -->
				<span style="color: #2b85e4;margin-bottom:10rpx;font-weight: 700;"> {{infoObj.name}}</span>

			</view>
			<view class="list-w">
				<view class="test_form">
					<view class="form_item">
						<view class="label">
							<view style="color: red;margin-right: 10rpx;">*</view>
							<u-icon name="account" size="50rpx" color="#333333"></u-icon>
							<span>姓名</span>
						</view>
						<view class="content">
							<u--input v-model.trim="formData.fullName" placeholder="请填写真实姓名" fontSize="14"
								inputAlign="right" border="none"></u--input>
						</view>
					</view>
					<view class="form_item">
						<view class="label">
							<view style="color: red;margin-right: 10rpx;">* </view>
							<u-icon name="phone" size="50rpx" color="#333333"></u-icon>
							<span>手机号</span>
						</view>
						<view class="content">
							<u--input v-if="formData.mobile" disabled v-model="formData.mobile" placeholder="请获取"
								fontSize="14" inputAlign="right" border="none" clearable></u--input>
							<view v-else>
								<button size="mini" open-type="getPhoneNumber" class="phone_button"
									@getphonenumber="getUserPhone"
									:style="{backgroundColor : accreditNum < 5 ? '#fff' : '#F2F2F2',color:accreditNum < 5 ? '#2b85e4'  : '#979797'}"
									:disabled="(accreditNum >= 5)">
									{{btnTitle}}
								</button>
							</view>
						</view>

					</view>
					<view class="form_item">
						<view class="label">
							<view style="color: red;margin-right: 10rpx;">* </view>
							<u-icon name="home" size="50rpx" color="#333333"></u-icon>
							<span>公司名</span>
						</view>
						<view class="content">
							<u--input v-model.trim="formData.company" placeholder="请填写公司名称" fontSize="14"
								inputAlign="right" border="none" clearable></u--input>
						</view>
					</view>
					<view class="form_item">
						<view class="label">
							<view style="color: red;margin-right: 22rpx;"></view>
							<u-icon name="file-text" size="50rpx" color="#333333"></u-icon>
							<span>备注</span>
						</view>
						<view class="content">
							<u--input v-model="formData.note" placeholder="请填写备注" fontSize="14" inputAlign="right"
								border="none" clearable></u--input>
						</view>
					</view>
				</view>
			</view>
			<view style="font-size: 24rpx;color: #777;margin-bottom: 20rpx;text-align: center;">活动时间：{{infoObj.time}}
			</view>
			<view v-if="infoObj.num >0 "
				style="font-size: 24rpx;color: #f56c6c;margin-bottom: 40rpx;text-align: center;">报名金额：{{infoObj.num}}元
			</view>
			<view v-else style="font-size: 24rpx;color: #f56c6c;margin-bottom: 40rpx;text-align: center;">免费报名
			</view>
			<u-button @click="submit" round style="font-size: 40rpx;" text="点击报名"
				color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		setSign,
		getPayParamSignActivity
	} from '@/api/signProject.js'

	import {
		AddWeChatPhone,
		GetWeChatPhoneCount,
		GetWeChatPhone,
		UpdateUserInfo
	} from "@/api/user.js"

	export default {
		data() {
			return {
				formData: {
					mobile: '',
					company: '',
					fullName: '',
					note: '',
					activityId: null,


				},
				infoObj: {
					name: '',
					time: "",
					num: 0,
				},
				btnTitle: "立即授权",
				accreditNum: 0,
			};
		},
		onLoad(e) {
			console.log('参数', e);
			if (e) {
				this.formData.activityId = Number(e.id)
				this.infoObj.name = e.name
				this.infoObj.time = e.time
				this.infoObj.num = Number(e.num)
			}

		},
		methods: {
			//获取手机号授权次数
			async getWeChatPhoneCount() {
				let res = await GetWeChatPhoneCount()
				console.log("手机号授权次数", res);
				this.accreditNum = Number(res)
				if (this.accreditNum >= 5) {
					this.btnTitle = "今日已达授权上限"
				} else {
					this.btnTitle = "立即授权"
				}
			},

			//获取用户手机号
			async getUserPhone(e) {
				console.log("手机code", e.detail.code);
				// 当前授权次数+1
				await AddWeChatPhone()
				if (e.detail.code) {
					// 如果有code  正常调 保存手机号码的接口
					await this.getWeChatPhone({
						code: e.detail.code
					})
				} else {
					wx.showToast({
						title: '已取消授权',
						icon: "none",
						duration: 1500,
						mask: true
					})

					// 取消授权 获取当前授权次数
					setTimeout(() => {
						this.getWeChatPhoneCount()
					}, 50)
				}
			},

			//保存手机号
			async getWeChatPhone(params) {
				let res = await GetWeChatPhone(params)
				console.log("用户手机号", res);

				// 获取手机号失败
				if (res.data && res.data == false) {
					wx.showToast({
						title: '手机号授权失败',
						icon: "none",
						duration: 1500,
						mask: true
					})
				} else {
					this.formData.mobile = res
					wx.showToast({
						title: '手机号授权成功',
						icon: "none",
						duration: 1500,
						mask: true
					})
					this.$forceUpdate()
					// 更新到数据库
					await UpdateUserInfo({
						companyPhone: this.formData.mobile,
					})
				}
			},

			// 校验
			checkFormMsg(msg) {
				this.$refs.uNotify.show({
					type: 'error',
					color: '#fff',
					message: msg + '不能为空',
					duration: 1000 * 3,
					fontSize: 16,

				})
				return false
			},


			// 获取支付数据
			getPaySign(e) {
				getPayParamSignActivity({
					signNo: e
				}).then((res) => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,

						success: function(res) {
							// 成功回调
							uni.showToast({
								title: '支付成功！！',
								duration: 2000,
							});
							uni.reLaunch({
								url: '/pagesB/pages/signProject/signSuccess'
							})
						},
						fail: function(err) {
							uni.showToast({
								title: '取消支付',
								duration: 2000,
								icon: "error",
							});
						}
					});
				})
			},


			// 立即报名提交
			async submit() {
				if (!this.formData.fullName.trim()) {
					await this.checkFormMsg("姓名")
				} else if (!this.formData.mobile) {
					await this.checkFormMsg("手机号码")
				} else if (!this.formData.company.trim()) {
					await this.checkFormMsg("公司名称")
				} else {
					// 先创建一个签到记录
					let res = await setSign(this.formData)
					if (res.code == 400) {
						return uni.showToast({
							title: res.message,
							duration: 2000,
							icon: "none",
						});
					}
					console.log('this.formData', this.formData, res);
					if (res.money && res.money > 0) {
						// 支付
						await this.getPaySign(res.participantNo)
					} else {
						// 直接跳到报名成功页面
						uni.reLaunch({
							url: '/pagesB/pages/signProject/signSuccess'
						})
					}

				}

			}
		}
	}
</script>

<style lang="scss">
	.set-sign {
		width: 100%;
		height: 100vh;
		background: url("http://applet.atptest.com/sign.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.sign-info {
			width: 100%;
			background-color: #fff;
			margin: 0 48rpx;
			height: 800rpx;
			padding: 20rpx;
			border-radius: 40rpx;


			.head {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				padding: 20rpx 0 40rpx 0;
				border-bottom: 1px solid #D5D5D5;
				font-size: 40rpx;
				font-weight: 700;

				span {
					margin-left: 20rpx;
				}
			}

			.list-w {
				margin-bottom: 50rpx;

				.test_form {
					.form_item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #D5D5D5;
						padding: 20rpx 0 20rpx 10rpx;
						box-sizing: border-box;

						.label {
							min-width: 180rpx;
							font-family: 思源黑体;
							font-size: 28rpx;
							display: flex;
							align-items: center;

							span {
								margin-left: 20rpx;
							}
						}

						.content {
							color: rgb(61, 61, 61);
							font-size: 24rpx;

							/deep/ .u-input {
								padding-right: 16rpx !important;
								box-sizing: border-box !important;
							}
						}

						.phone_button {
							height: 50rpx;
							font-size: 28rpx;
							color: #2b85e4;
							border: 1px solid #2b85e4;
							display: flex;
							align-items: center;
						}
					}
				}

			}
		}
	}
</style>